<template>
  <div class="app-container">
    <img src="@/assets/404_images/setting.jpg">
    <div class="header">关注疫情 预防病毒</div>
    <div class="footer">上海疾控中心热线：021-62758710</div>
    <div class="content">
      <div class="title">上海疫情管理系统</div>
      <div class="picture1">
        <img src="@/assets/404_images/me.png">
        <div class="button1" type="button">超级管理员</div>
      </div>
      <div class="picture2">
        <img src="@/assets/404_images/regionAdmin.png">
        <div class="button2" type="button">区域管理员</div>
      </div>
      <div class="picture3">
        <img src="@/assets/404_images/prevent.png">
        <div class="button3" type="button">防疫管理员</div>
      </div>
      <div class="picture4">
        <img src="@/assets/404_images/data.png">
        <div class="button4" type="button">疫情数据</div>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style lang="scss">

*{
  margin:0px;
  padding:0px;
}
img{
  width: 100%;
  height: 100%;
}
.app-container{
   width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  position:relative;
}
.header{
  position: absolute;
  top:0px;
  width: 100vw;
  height: 40px;
  background-color: rgba(200, 196, 195, 0.815);
  text-align: center;
  line-height: 40px;
  color: white;
}
.footer{
  position: absolute;
  bottom: 0px;
  width: 100vw;
  height: 40px;
  background-color: rgba(200, 196, 195, 0.815);
  text-align: center;
  line-height: 40px;
  color: white;
}
.content{
  position: absolute;
  width: 100vw;
  height: 500px;
  background-color:  rgba(255, 255, 255, 0.569);
  top: 50%;
  margin-top: -250px;
}
.title{
  text-align: center;
  font-size: 40px;
  font-family: '宋体';
  font-weight: bold;
  margin: 20px;
}
.picture1{
  width: 100px;
  height: 100px;
  position: relative;
  left: 25%;
  top: 10%;
  float: left;
}

.picture2{
  width: 100px;
  height: 100px;
  position: relative;
  left: 35%;
  top: 10%;
  float: left;
}

.picture3{
  width: 100px;
  height: 100px;
  position: relative;
  left: 45%;
  top: 10%;
  float: left;
}

.picture4{
  width: 100px;
  height: 100px;
  position: relative;
  left: 55%;
  top: 10%;
  float: left;
}

.button1{
  width: 150px;
  height: 60px;
  background-color: darkgray;
  position: relative;
  top: 50%;
  left: -20%;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  color: white;
}

.button2{
  width: 150px;
  height: 60px;
  background-color: darkgray;
  position: relative;
  top: 50%;
  left: -20%;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  color: white;
}

.button3{
  width: 150px;
  height: 60px;
  background-color: darkgray;
  position: relative;
  top: 50%;
  left: -20%;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  color: white;
}

.button4{
  width: 150px;
  height: 60px;
  background-color: darkgray; 
  position: relative;
  top: 50%;
  left: -20%;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  color: white;
}

</style>
